<template>
    <div>
        <div class="background"></div>

        <div class="top">
            <img class="_img" src='../../assets/images/user.png' alt="欢迎您"/>

            <button class="login" @click="tip">点击登录</button>
            <!--      <view v-if="!canIUse">请升级微信版本</view>-->
            <!--      <view class="loginText" v-if="userInfo.nickName">{{userInfo.nickName}}</view>-->
        </div>

        <div class="cells">
            <van-cell title="我的订单" @click="toAllOrders" is-link/>
            <van-cell title="超市简介" @click='superMarket' is-link/>
        </div>

        <van-dialog id="van-dialog"/>

    </div>
</template>


<script>

    import {Dialog} from 'vant';

    export default {
        data() {
            return {
                canIUse: ' ',
                userInfo: {
                    nickName: null,
                    avatarUrl: '../../assets/images/user.png'
                },
            }
        },
        onLoad: function () {
            // 查看是否授权
            // wx.getSetting({
            //   success: (res) => {
            //     if (res.authSetting['scope.userInfo']) {
            //       // 已经授权，可以直接调用 getUserInfo 获取头像昵称
            //       this.getUserInfo();
            //     }
            //   }
            // })
        },
        methods: {
            // getUserInfo: function () {
            // wx.getUserInfo({
            //   success: (res) => {
            //     this.userInfo = res.userInfo;
            //     let weInfo = [];
            //     weInfo[0] = 1834250342;
            //     weInfo[1] = this.userInfo.nickName;
            //     this.$store.dispatch('modiWeInfo',weInfo);
            //     console.log('获取用户信息，授权成功！',this.$store);
            //   },
            //   fail: () => {
            //     console.log('获取用户信息，授权失败！');
            //   }
            // })
            // },

            tip: function () {
                Dialog.alert({
                    title: '功能演示',
                    message: '提示：此功能仅为演示使用，未登陆也可使用！'
                }).then(() => {
                    // on close
                });
            },
            superMarket:function(){
                Dialog.alert({
                    title: '超市简介',
                    message: '苏果超市的发展得到各级党委政府的重视和关怀，国务院总理温家宝同志对苏果发展先后三次作出重要批示，并两度亲临苏果视察指导。2007年、2006年，商务部和中华全国供销合作总社分别在江苏召开现场会，总结推广苏果经验。2013年5月23日，全国供销合作总社党组书记、理事会主任王侠视察苏果超市。“苏果模式”作为中国零售业的典型案例，已成为经济学界、零售行业内及南京高等院校教研人员关注和研究的对象，各高校莘莘学子也纷纷以苏果为实习基地和参与社会实践的良好平台。'
                }).then(() => {
                    // on close
                });
            },
            toAllOrders: function () {
                this.$router.push('/pages/allorder/main');
                // wx.navigateTo({
                //     url: '/pages/allorder/main'
                // })
            }
        },

    }
</script>

<style>

    .background {
        width: 150%;
        height: 300px;
        border-radius: 50%;
        background-color: #FE785A;
        margin-left: -25%;
        margin-top: -25%;
        z-index: -1;
        position: absolute;
    }

    .top {
        width: 250px;
        height: 50px;
        /*background-color: burlywood;*/
        position: absolute;
        top: 50px;
        left: 50px;
    }

    ._img {
        width: 75px;
        height: 75px;
        display: inline-block;
        border-radius: 50%;

    }

    .capsule {
        width: 75px;
        height: 30px;
        background-color: rgba(0, 0, 0, 0.2);
        display: inline-block;
        top: -5px;
        position: relative;
        margin-left: 15px;
        border-radius: 44px;
        text-align: center;

    }

    ._p {
        font-size: 15px;
        line-height: 30px;
        color: white;
    }

    .login {
        height: 30px;
        background-color: rgba(0, 0, 0, 0.2);
        display: inline-block;
        top: 25px;
        left: -12px;
        position: relative;
        margin-left: 15px;
        border-radius: 44px;
        text-align: center;
        font-size: 15px;
        line-height: 30px;
        color: white;
    }

    .loginText {
        height: 30px;
        display: inline-block;
        top: -15px;
        position: relative;
        margin-left: 15px;
        text-align: center;
        font-size: 20px;
        line-height: 30px;
        color: white;
    }

    .cells {
        width: 85%;
        position: absolute;
        top: 150px;
        left: 7.5%;
        overflow: hidden;
        border-radius: 8px;
        opacity: 0.96;
        box-shadow: 3px 3px 15px #d6d6d6;
    }

</style>
